<template>
  <div class="picture">
    <el-page-header @back="$router.back()" content="素材管理" class="header">
    </el-page-header>
    <div class="btn-list">
      <el-radio-group v-model="collect" size="mini" @change="loadImage()">
        <el-radio-button :label="false">全部</el-radio-button>
        <el-radio-button :label="true">收藏</el-radio-button>
      </el-radio-group>
      <el-button size="mini" type="success" @click="dialogVisible = true"
        >上传素材</el-button
      >
    </div>
    <el-row :gutter="10">
      <el-col
        :lg="4"
        :md="6"
        :xs="12"
        :sm="6"
        v-for="item in images"
        :key="item.id"
        class="image-item"
      >
        <el-image style="height: 100px" :src="item.url" fit="cover">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <div class="cover">
          <i
            :class="{
              'el-icon-star-on': item.is_collected,
              'el-icon-star-off': !item.is_collected,
            }"
            @click="onCollect(item)"
          ></i>
          <i class="el-icon-delete-solid" @click="onDelete(item)"></i>
        </div>
      </el-col>
    </el-row>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalCount"
      class="footer"
      @current-change="onCurrentChange"
    >
    </el-pagination>
    <!-- 对话框 -->
    <el-dialog
      title="上传素材"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="30%"
    >
      <el-upload
        class="upload-demo"
        drag
        action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
        :headers="loadHeaders"
        name="image"
        multiple
        :on-success="onUploadSuccess"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import { GetImage, CollectImage, DeleteImage } from "@/services/image";

export default {
  name: "",
  data() {
    const user = JSON.parse(window.localStorage.getItem("user"));
    return {
      collect: false, //默认查询全部
      images: [], //图片素材
      dialogVisible: false, //对话框
      loadHeaders: {
        Authorization: `Bearer ${user.token}`,
      },
      totalCount: 0,
    };
  },
  created() {
    this.loadImage();
  },
  methods: {
    loadImage(page = 1) {
      GetImage({
        collect: this.collect,
        page,
        per_page: 10,
      }).then((res) => {
        // console.log(res);
        this.images = res.data.data.results;
        this.totalCount = res.data.data.total_count;
      });
    },

    onUploadSuccess() {
      // 关闭对话框
      this.dialogVisible = false;
      // 更新列表
      this.loadImage(1);
    },
    // 分页
    onCurrentChange(page) {
      this.loadImage(page);
    },
    // 收藏
    onCollect(img) {
      CollectImage(img.id, !img.is_collected).then(res => {
        console.log(res);
        img.is_collected = !img.is_collected;
      })
    },
    onDelete(img) {
      DeleteImage(img.id).then(res => {
        console.log(res);
        this.loadImage();
      })
    }
  },
};
</script>

<style scoped>
.picture {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 25px;
}

.header {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.btn-list {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.footer {
  margin-top: 20px;
}

.image-item {
  position: relative;
}

.image-item .cover {
  height: 25px;
  background-color: rgba(102, 102, 102, 0.6);
  position: absolute;
  bottom: 0px;
  left: 5px;
  right: 5px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: #fff;
}
</style>
